





        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">用户统计</h3>
            </div>
            <div class="panel-body home-info">
                <ul class="list-inline">

                    <div id="user" style="width: 450px;height: 239px;"></div>


                </ul>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
               <h3 class="panel-title">用户年龄段统计</h3>
            </div>
            <div class="panel-body home-info">
                <ul class="list-inline">

                    <div id="age" style="width: 450px;height: 239px;"></div>


                </ul>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">积分统计排行</h3>
            </div>
            <div class="panel-body home-info">
                <ul class="list-unstyled">

                    <div id="news" style="width:360px;height:100%;margin-left: 0px;"></div>

                </ul>
            </div>
        </div>


<include file="public@header"/>
<style>
    .home-info li em {
        float: left;
        width: 120px;
        font-style: normal;
        font-weight: bold;
    }

    .home-info ul {
        padding: 0;
        margin: 0;
    }

    .panel {
        margin-bottom: 0;
    }

    .grid-sizer {
        width: 10%;
    }

    .grid-item {
        margin-bottom: 5px;
        padding: 5px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 5px;
        padding-right: 5px;
        float: none;
    }
    .panel-body {
        padding: 0px;
    }

</style>

<hook name="admin_before_head_end"/>
</head>
<body>



<script src="__STATIC__/js/admin.js"></script>

<script src="__STATIC__/js/echarts.min.js"></script>

<script>




//    var myChart3 = echarts.init(document.getElementById('act'));
//    var myChart4 = echarts.init(document.getElementById('time'));

    //各志愿者用户数量统计
    $.ajax({
        url:'/portal/admin_index/news',
        success:function (res) {
            var myChart = echarts.init(document.getElementById('user'));
            var option= {
                title : {
                    text: '各志愿者用户数量统计',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['牵手志愿者','啄木鸟志愿者','交管员']
                },
                series : [
                    {
                        name: '志愿者比例',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:res[1], name:'牵手志愿者'},
                            {value:res[2], name:'啄木鸟志愿者'},
                            {value:res[3], name:'交管员'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    })

        //各志愿者用户年龄段统计
    $.ajax({
        url:'/portal/admin_index/age',
        success:function (res) {
            var myChart = echarts.init(document.getElementById('age'));
            var option = {
                title : {
                    text: '各志愿者用户年龄段统计',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['80前','80后90前','90后00前','00后']
                },
                series : [
                    {
                        name: '志愿者比例',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:res[0], name:'80前'},
                            {value:res[1], name:'80后90前'},
                            {value:res[2], name:'90后00前'},
                            {value:res[3], name:'00后'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    })

    //积分展示


    $.ajax({
        url: '/portal/admin_index/points',
        success: function (res) {
            var myChart = echarts.init(document.getElementById('news'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis:[{
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                    {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                ],
                yAxis: {
                    type: 'category',
                    data: res.user,
                    inverse: true //反转坐标轴
                },
                series: [
                    {
                        type: 'bar',
                        data:res.points
                    },

                ]
            };
            myChart.setOption(option);
        }
    })


//    $.ajax({
//        url:'/portal/admin_index/points',
//        success:function(res){
//            var myChart = echarts.init(document.getElementById('news'));
//            option = {
//                tooltip: {
//                    trigger: 'axis',
//                    axisPointer: {
//                        type: 'cross',
//                        crossStyle: {
//                            color: '#999'
//                        }
//                    }
//                },
//                toolbox: {
//                    feature: {
//                        dataView: {show: true, readOnly: false},
//                        magicType: {show: true, type: ['line', 'bar']},
//                        restore: {show: true},
//                        saveAsImage: {show: true}
//                    }
//                },
//                legend: {
//                    data:[]
//                },
//                xAxis: [
//                    {
//                        type: 'category',
//                        data: res.user,
//                        axisPointer: {
//                            type: 'shadow'
//                        }
//                    }
//                ],
//                yAxis: [
//                    {
//                        type: 'value',
//                        name: '积分数',
//                        min: 0,
//
//                        interval: 50,
//                        axisLabel: {
//                            formatter: '{value} 分'
//                        }
//                    }
//
//                ],
//                series: [
//                    {
//                        name:'志愿者积分排行',
//                        type:'bar',
//                        data:res.points
//                    }
//                ]
//            };
//            myChart.setOption(option);
//        }
//
//    })



//    var option4 = {
//        legend: {},
//        tooltip: {},
//        dataset: {
//            source: [
//                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
//                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
//                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
//                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
//                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
//            ]
//        },
//        series: [{
//            type: 'pie',
//            radius: 60,
//            center: ['10%', '30%']
//            // No encode specified, by default, it is '2012'.
//        }, {
//            type: 'pie',
//            radius: 60,
//            center: ['40%', '30%'],
//            encode: {
//                itemName: 'product',
//                value: '2013'
//            }
//        }, {
//            type: 'pie',
//            radius: 60,
//            center: ['10%', '75%'],
//            encode: {
//                itemName: 'product',
//                value: '2014'
//            }
//        }, {
//            type: 'pie',
//            radius: 60,
//            center: ['40%', '75%'],
//            encode: {
//                itemName: 'product',
//                value: '2015'
//            }
//        }
//            , {
//                type: 'pie',
//                radius: 60,
//                center: ['70%', '75%'],
//                encode: {
//                    itemName: 'product',
//                    value: '2016'
//                }
//            }
//            , {
//                type: 'pie',
//                radius: 60,
//                center: ['70%', '30%'],
//                encode: {
//                    itemName: 'product',
//                    value: '2017'
//                }
//            }]
//    };



//    myChart3.setOption(option3);
    //myChart4.setOption(option4);


    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });


    });

    function _widgetSort() {

        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {

            }
        });
    }


</script>

</body>
</html>